<template>
    <!-- <div class="eSearch" style="width: 100%;height: 100px;background-color: red;">
        搜索asdfasdffdsf
    </div> -->
    <!-- <el-card class="eSearch">


    </el-card> -->
    <el-card class="eSearch">
        <div slot="header" class="clearfix">
            <span>筛选查询</span>
            
            <el-button style="float: right; padding: 3px 0;" type="text" @click="crud.toQuery">查询</el-button>
            <el-button style="float: right; padding: 3px 0;margin-right: 10px;" type="text" @click="crud.resetQuery(true)">重置</el-button>
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
        </div> -->
        <el-form
            ref="formItem"
            :inline="true"
            :model="formData"
            :label-width="labelWidth"
            class="formStyle"
          >
            <div ref="formItem" class="formItem">
              <slot />
            </div>
          </el-form>
          <div v-if="showActionBtn" class="showStatus">
            <el-button
              type="text"
              :icon="iconName"
              @click="handleCollapse"
            >{{ collapseText }}</el-button>
          </div>
    </el-card>
</template>

<script>

export default {
    name: 'Search',
    props: {
        crud: {
            type: Object,
            required: true
        },
        labelWidth: {
            type: String,
            default: '100px'
        },
        // 搜索条件对象
        formData: {
            type: Object
        },
    },
    components: {},
    data() {
        return {
            isCollapse: false,
            showActionBtn: false,
        };
    },
    computed: {
        collapseText() {
            return this.isCollapse ? '收起' : '更多'
        },
        iconName() {
            return this.isCollapse ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
        }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        /** 处理收起与展开事件 */
        handleCollapse() {
            this.isCollapse = !this.isCollapse
            this.resetDisplay()

            this.$emit('handleCollapse')
        },
         /** 重置隐藏元素 */
        resetDisplay() {
            if (this.$refs.formItem.children==undefined) return;
            Array.from(this.$refs.formItem.children).map((node, index) => {
                if (index >= this.curCol * 2 && !this.isCollapse) {
                    node.style.display = 'none'
                } else {
                    node.style.display = 'block'
                }
            })
        },
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
}
</script>
<style lang='scss'>
//@import url(); 引入公共css类
.eSearch{
    margin-bottom: 10px;
    width: 100%;
}
// 下拉按钮
.showStatus {
    text-align: center;
    color: #409efe;
    cursor: pointer;
    font-size: 12px;
}
</style>